<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>红绿灯显示</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body,html {
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .container {
            width: 200px;
            height: 200px;
            position: relative;
            border-radius: 7px;
        }
        .red {
            background: linear-gradient(135deg,#f16666 10%,#ec1616 90%);
        }
        .yellow {
            background: linear-gradient(135deg,#e4d077 10%,#ecc61b 90%);
        }
        .green {
            background: linear-gradient(135deg,#75f380 10%,#21f032 90%);
        }
        .red,
        .green,
        .yellow {
            border: 1px solid #efeded;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            opacity: 0;
            transition: opacity .4s cubic-bezier(0.075, 0.82, 0.165, 1);
            color:#ffffff;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 15px;
            letter-spacing: 2px;
            border-radius: 7px;
        }

        .red.active,
        .green.active,
        .yellow.active {
            opacity: 1;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="red"></div>
        <div class="yellow"></div>
        <div class="green"></div>
    </div>
    <script>
        const container = document.querySelector(".container");
        const items = Array.from(container.children);
        const generateRGYLight = (lights, handler) => {
            let time = 0
            const run = () => {
                const currentActiveLight = lights.shift()
                time = currentActiveLight.duration
                //执行显示当前信号灯的函数
                handler(currentActiveLight.color,time)
                setTimeout(() => {
                    lights.push(currentActiveLight)
                    run()
                }, currentActiveLight.duration)
            }
            run()
        }
        const lights = [{
                color: "red",
                duration: 5000
            },
            {
                color: "yellow",
                duration: 3000
            },
            {
                color: "green",
                duration: 5000
            },
        ]

        function runLight(color,time) {
            items.forEach((item,index) => {
                if(item.classList.contains(color)){
                    item.classList.add("active")
                    item.textContent = (time / 1000) + 's后变成' + lights[0].color
                }else{
                    item.classList.remove("active")
                }
            })
        }
        generateRGYLight(lights, runLight);
    </script>
</body>

</html>